import CommonHeader from '@/components/common-header/index'
import activeLogo from '@/static/active.svg'
import defaultLogo from '@/static/default.svg'
import correctLogo from '@/static/correct.svg'
import errorLogo from '@/static/error.svg'
import GetAddressName from '@/apis/GetAddressName'
import IsInRange from '@/apis/IsInRange'
import SelectClockTime from '@/apis/SelectClockTime'
import PunchCard from '@/apis/PunchCard'

export default {
  name: 'PunchCard',
  components: {
    CommonHeader,
  },
  data() {
    return {
      // tab栏管理
      active: 0,
      // 打卡显示管理
      workPunchCardInfo: {
        inWork: {
          mainLogo: activeLogo,
          sideLogo: correctLogo,
          buttonStyle: 'normal-punch-card-active',
          buttonText: '您已在打卡范围内',
          textStyle:'normal-punch-card-text-active'
        },
        outWork: {
          mainLogo: defaultLogo,
          sideLogo: errorLogo,
          buttonStyle: 'normal-punch-card-default',
          buttonText: '您未在打卡范围内',
          textStyle:'normal-punch-card-text-default'
        },
      },
      workPunchCardState: {
        mainLogo: defaultLogo,
        sideLogo: errorLogo,
        buttonStyle: 'normal-punch-card-default',
        buttonText: '您未在打卡范围内',
      },
      nowTime: '00:00:00',
      // 拜访信息部分
      visitingInformationDialogIsShow: false,
      visitingInformationAreaContent: '',
      fillInTheVisits: '填写拜访信息',
      visitingInformationAreaContentStore: '',
      // 地点信息
      nowArea: '',
      visitingArea: '',
      // 打卡时间
      workTime: '',
      leaveTime: '',
      workingTime: '未打卡',
      getOffWorkTime: '未打卡',
      ifWorkingPunch: false,
      ifAfterWorkPunch: false,
      normalPunchCardInfo: '上班打卡',
      // 定时更新器
      clock: '',
    }
  },
  methods: {
    /**
     * 显示拜访信息对话框
     */
    visitingInformationDialogShow() {
      this.visitingInformationDialogIsShow = true
    },
    /**
     * 关闭拜访信息对话框
     */
    visitingInformationDialogHide() {
      this.visitingInformationDialogIsShow = false
      this.visitingInformationAreaContent = this.visitingInformationAreaContentStore
    },
    /**
     * 拜访信息确认
     */
    handleConfirm() {
      // console.log('handleConfirm')
      if (this.visitingInformationAreaContent.trim()) {
        this.fillInTheVisits = '已填写拜访信息'
        this.visitingInformationAreaContent = this.visitingInformationAreaContent.trim()
        this.visitingInformationAreaContentStore = this.visitingInformationAreaContent.trim()
      } else {
        this.visitingInformationAreaContent = ''
        this.visitingInformationAreaContentStore = ''
        this.fillInTheVisits = '填写拜访信息'
      }
      this.visitingInformationDialogHide()
    },
    /**
     * 普通打卡事件
     */
    normalPunchCardClick() {
      if (this.workPunchCardState.buttonText === '您未在打卡范围内') {
        return
      } else {
        PunchCard(
          {
            jobNumber: this.$store.state.userInfo.jobNumber,
          },
          this.$store.state.authorization
        ).then((res) => {
          // console.log(res)
          if (res.data.data.workClockTime) {
            this.workingTime = res.data.data.workClockTime + ' 已打卡'
            this.ifWorkingPunch = true
            this.normalPunchCardInfo = '下班打卡'
          } else {
            this.workingTime = '未打卡'
            this.ifWorkingPunch = false
            this.normalPunchCardInfo = '上班打卡'
          }
          if (res.data.data.leaveClockTime) {
            this.getOffWorkTime = res.data.data.leaveClockTime + ' 已打卡'
            this.ifAfterWorkPunch = true
          } else {
            this.getOffWorkTime = '未打卡'
            this.ifAfterWorkPunch = false
          }
          if (res.data.flag) {
            this.$toast('打卡成功')
          }
        })
      }
    },
    /**
     * 外勤打卡事件
     */
    visitingPunchCardClick() {
      this.visitingInformationAreaContentStore = this.visitingInformationAreaContent.trim()
      // Get拜访信息
      // console.log(this.visitingInformationAreaContent)
      PunchCard(
        {
          jobNumber: this.$store.state.userInfo.jobNumber,
          place: this.visitingArea,
          clockType: 1,
          visitContent: this.visitingInformationAreaContent,
        },
        this.$store.state.authorization
      ).then((res) => {
        if (res.data.flag) {
          this.$toast('打卡成功')
        }
        this.visitingInformationAreaContent = ''
        this.visitingInformationAreaContentStore = ''
        this.fillInTheVisits = '填写拜访信息'
      })
    },
    goTo(goal) {
      uni.navigateTo({
        url: goal,
      })
    },
  },
  mounted() {
    const _this = this
    SelectClockTime(this.$store.state.authorization).then((res) => {
      // console.log(res)
      this.workTime =
        res.data.data[0].workTime.split(':')[0] +
        ':' +
        res.data.data[0].workTime.split(':')[1]
      this.leaveTime =
        res.data.data[0].leaveTime.split(':')[0] +
        ':' +
        res.data.data[0].leaveTime.split(':')[1]
    })
    uni.getLocation({
      type: 'wgs84',
      geocode: true,
      success: function(res) {
        GetAddressName(
          {
            longitude: res.longitude,
            latitude: res.latitude,
          },
          _this.$store.state.authorization
        )
          .then((res) => {
            // console.log(res)
            _this.nowArea = res.data.data[0]
            _this.visitingArea = res.data.data[0]
            _this.$store.commit('changeNowVisitingArea', res.data.data[0])
            _this.$store.commit('initVisitingArea', res.data.data)
          })
          .catch((err) => {
            console.log(err)
          })
        IsInRange(
          {
            longitude: res.longitude,
            latitude: res.latitude,
            jobNumber: _this.$store.state.userInfo.jobNumber,
          },
          _this.$store.state.authorization
        )
          .then((res) => {
            // 测返回range值
            // console.log(res)
            if (res.data.flag) {
              _this.workPunchCardState = _this.workPunchCardInfo.inWork
            } else {
              _this.workPunchCardState = _this.workPunchCardInfo.outWork
            }
            if (res.data.data.work) {
              _this.workingTime = res.data.data.work + ' 已打卡'
              _this.ifWorkingPunch = true
              _this.normalPunchCardInfo = '下班打卡'
            } else {
              _this.workingTime = '未打卡'
              _this.ifWorkingPunch = false
              _this.normalPunchCardInfo = '上班打卡'
            }
            if (res.data.data.afterWork) {
              _this.getOffWorkTime = res.data.data.afterWork + ' 已打卡'
              _this.ifAfterWorkPunch = true
            } else {
              _this.getOffWorkTime = '未打卡'
              _this.ifAfterWorkPunch = false
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
    })
    this.clock = setInterval(() => {
      uni.getLocation({
        type: 'wgs84',
        geocode: true,
        success: function(res) {
          GetAddressName(
            {
              longitude: res.longitude,
              latitude: res.latitude,
            },
            _this.$store.state.authorization
          )
            .then((res) => {
              _this.nowArea = res.data.data[0]
              _this.$store.commit('initVisitingArea', res.data.data)
              _this.visitingArea = _this.$store.state.visitingArea.nowArea
            })
            .catch((err) => {
              console.log(err)
            })
          IsInRange(
            {
              longitude: res.longitude,
              latitude: res.latitude,
              jobNumber: _this.$store.state.userInfo.jobNumber,
            },
            _this.$store.state.authorization
          )
            .then((res) => {
              // console.log(res)
              if (res.data.flag) {
                _this.workPunchCardState = _this.workPunchCardInfo.inWork
              } else {
                _this.workPunchCardState = _this.workPunchCardInfo.outWork
              }
              if (res.data.data.work) {
                _this.workingTime = res.data.data.work + ' 已打卡'
                _this.ifWorkingPunch = true
              } else {
                _this.workingTime = '未打卡'
                _this.ifWorkingPunch = false
              }
              if (res.data.data.afterWork) {
                _this.getOffWorkTime = res.data.data.afterWork + ' 已打卡'
                _this.ifAfterWorkPunch = true
              } else {
                _this.getOffWorkTime = '未打卡'
                _this.ifAfterWorkPunch = false
              }
            })
            .catch((err) => {
              console.log(err)
            })
        },
      })
    }, 3000)
    // 获取当前时间
    const getNowTime = setInterval(() => {
      let nowDate = new Date()
      let hours = ''
      let minutes = ''
      let seconds = ''
      hours =
        nowDate.getHours() >= 10 ? nowDate.getHours() : '0' + nowDate.getHours()
      minutes =
        nowDate.getMinutes() >= 10
          ? nowDate.getMinutes()
          : '0' + nowDate.getMinutes()
      seconds =
        nowDate.getSeconds() >= 10
          ? nowDate.getSeconds()
          : '0' + nowDate.getSeconds()
      this.nowTime = hours + ':' + minutes + ':' + seconds
    }, 1000)
  },
  // 监听vuex中的数据变化，实时更新现在的外勤打卡地点
  computed: {
    nowVisitingArea() {
      return this.$store.state.visitingArea.nowArea
    },
  },
  watch: {
    nowVisitingArea: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.visitingArea = newVal
        }
      },
      immediate: true,
      deep: true,
    },
  },
  destroyed() {
    clearInterval(this.clock)
  },
}
